@import "../../css/var.less";
@import "mallpublic.less";


.payContent{
    background-color: #f9f9f9;
    font-size: 14px;
    .headNav{
        .w1200;
        padding-top: 20px;
    }
    .payMain{
        .w1200;
        background-color: #fff;
        padding:0 15px 15px 15px;
        .tit{
            height: 50px;
            color: #202020;
            font-weight: 600;
            padding-top: 20px;
        }
        .orderInfo{
            height: 120px;
            border-bottom: 1px solid #eeeeee;
           
            .impor{
                height: 40px;
                color: #202020;
                .number{
                    .fl;
                    line-height: 26px;
                    .tip{
                        color: #888;
                    }
                }
                .price{
                    .fr;
                    span{
                        color: #ff440a;
                        font-size: 18px;
                    }
                }
                
            }
        }
        .bankCard{
            .headTitle span{
                padding: 0;
            }
            .b-top{
                height: 54px;
                line-height: 54px;
                .add{
                    margin-left: 40px;
                    color: #65c7f5;
                    cursor: pointer;
                }
            }
            .CardGroup{
                .systemPopup-card-remove{
                    width: 310px;
                    height: 82px;
                    background: #f9f9f9;
                    border-radius: 4px;
                    padding: 12px 0 0   8px;
                    overflow: hidden;
                    position: relative;
                    margin-right: 20px;
                    img{
                        margin: -8px 16px 0 10px;
                    }
                    .card-top{
                        height: 30px;
                        line-height: 30px;
                        span{
                            color: #202020;
                            font-size: 16px;
                            font-weight: bold;
                        }
                    }
                    .card-number{
                        font-size: 14px;
                        color: #202020;
                        text-indent: 70px;
                    }
                    .el-checkbox__label{
                        display: none;
                    }
                    .card-tr1,.card-tr2{
                        width: 46px;
                        height: 46px;
                        background: url('../../images/card-tr1.png') 0 0 no-repeat;
                        position: absolute;
                        top: 0px;
                        right: 0px;
                        font-size: 12px;
                        color: #fff;
                        span{
                            position: absolute;
                            top: 9px;
                            left: 10px;
                            display: inline-block;
                            transform:rotate(45deg);
                        }
                    }
                    .card-tr2{
                        background: url('../../images/card-tr2.png') 0 0 no-repeat;
                    }
                }
            }
            .payNum{
                margin-top: 25px;
                span{
                    color: #888;
                }
                .numBox{
                    padding:8px 0;
                    border:1px solid #ddd;
                    width: 230px;
                    height: 38px;
                    border-radius: 4px;
                    margin:10px 0;
                    input{
                        width: 38px;
                        border-right: 1px solid #ddd;
                        text-align: center;
                        height: 100%;
                        .fl;
                        color: #888;
                        &:last-child{
                            border:none;
                        }
                        &:focus{
                            outline: none;
                        }
                    }
                }
                button{
                    width: 222px;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    color: #fff;
                    font-size: 18px;
                    border-radius: 4px;
                    background-color: #0db4b9;
                    display: block;
                }
            }
            .ewm{
                padding-top: 65px;
                .e-tip{
                    color: #202020;
                    text-align: center;
                    span{
                        color: #ff440a;
                    }
                }
                .ewmimgBox{
                    width: 234px;
                    height: 234px;
                    margin:0 auto;
                    margin-top: 15px;
                    padding:15px;
                    background-color: #fff;
                    border:1px solid #e3e3e3;
                    img{
                        width: 100%;
                    }
                }
                .e-tip2{
                    width: 234px;
                    height: 48px;
                    background-color: #0db4b9;
                    color: #fff;
                    text-align: center;
                    margin: 16px auto 0;
                    img{
                        width: 34px;
                        .fl;
                        margin: 7px 25px 0;
                        height: 34px;
                    }
                    p{
                        .fl;
                        text-align: left;
                        margin-top: 3px;
                    }
                }
            }
        }
        
    }
    .payOkMain{
        .w1200;
        height: 630px;
        background-color: #fff;
        .icon-ok{
            color: #06ca53;
            display: block;
            font-size: 100px;
            text-align: center;
            padding-top:60px; 
        }
        .ok-tip{
            height: 50px;
            text-align: center;
        }
        .operation{
            text-align: center;
            a{
                display: inline-block;
                width: 120px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                background-color: #0db4b9;
                color: #fff;
                border-radius: 4px;
                margin: 0 45px 30px;
            }
        }
        .ok-orderInfo{
            width: 96%;
            margin:0 auto;
            border-top: 1px solid #e3e3e3;
            padding: 30px 0 0 280px;
            &>div{
                height: 34px;
                span{
                    width: 160px;
                    display: inline-block;
                }
            }
        }
    }
}
.systemPopup{
    .systemPopup-cards{
        height: 570px;
        padding: 18px 68px;
        font-size: 14px;
        .systemPopup-car{
            -webkit-transition: 0.6s;
            transition: 0.6s;
            -webkit-transform-style: preserve-3d;
                    transform-style: preserve-3d;
            position: relative;
        }
        .systemPopup-cardss,.systemPopup-cardsss{
            width: 400px;
            height: 200px;
            background: url('../../images/wealthMain-03.png') 0 0 no-repeat;
            background-size: cover;
            border-radius: 4px;
            overflow: hidden;
            margin: 0 auto;
            color: #fff;
            padding: 25px;
            -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
            position: absolute;
            z-index: 2;
            .bank-card-t{
                font-size: 20px;
                height: 26px;
            }
            .bank-card-num{
                font-size: 30px;
                margin-top: 25px;
                height: 40px;
            }
            .bank-card-n{
                margin-top: 15px;
            }
            .bank-card-ts{
                margin-top: 5px;
                font-weight: bold;
            }
        }
        .systemPopup-cardsss{
            -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
            z-index: 1;
            .systemPopup-cardss-bj{
                height: 50px;
                background: #393939;
                position: absolute;
                width: 100%;
                top: 30px;
                left: 0px;
            }
            .systemPopup-cardss-ccv{
                width: 315px;
                margin: 0 auto;
                .systemPopup-cardss-ccv-t{
                    margin-top: 70px;
                    height: 30px;
                    line-height: 30px;
                    font-size: 16px;
                    color: #fff;
                    text-align: right;
                    padding-right: 15px;
                }
                .systemPopup-cardss-ccv-b{
                    height: 40px;
                    line-height: 40px;
                    border-radius: 4px;
                    background: #fff;
                    padding-right: 15px;
                    color: #202020;
                    text-align: right;
                }
                
            }
        }
        .bank-cards-m{
            margin-top: 210px;
            .bank-cards-i{
                input{
                    width: 78px;
                    height: 36px;
                    border: 1px solid #dcdfe6;
                    text-align: center;
                    border-radius: 4px;
                    margin-right: 28px;
                    float: left;
                    &:nth-child(4){
                        margin-right: 0px;
                    }
                } 
            }
        }
        .system-cards-sel{
            width: 100%;
        }
        .system-cards-sels{
            width: 100px;
        }
        .bank-cards-m-mar{
            margin-bottom: 2px;
            margin-top: 10px;
            font-size: 14px;
            color: #666;
        }
        .bank-cards-ms-i-ts{
            width: 100px;
        }
        .bank-cards-name{
            .bank-cards-ms-i-ts{
                width: 100%;
            }
        }
    }
    .systemPopup-car:hover{
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}